<template>
  <div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :stop-propagation="false"
    >
      <van-swipe-item
        :class="[item.ad ? 'banner-gg' : '']"
        v-for="(item, index) in $mockData[dataIndex].banner"
        :key="index"
        @click="$router.push({ name: 'video', params: { bvid: item.id } })"
      >
        <p>{{ item.title }}</p>
        <img v-lazy="item.img" :alt="item.title" />
      </van-swipe-item>
    </van-swipe>

    <van-list
      v-model="listLoading"
      :finished="listFinished"
      :finished-text="listFinishedText"
      :error.sync="listError"
      :error-text="listErrorText"
      :immediate-check="listImmediateCheck"
      @load="onListLoad"
    >
      <template #loading>
        <van-loading :color="rootThemeColor" type="spinner">{{
          listLoadingText
        }}</van-loading>
      </template>
      <div class="list">
        <video-item
          class="vi"
          v-for="item in videoList"
          :key="item.avid"
          :aid="item.aid"
          :bvid="item.bvid"
          :title="item.title"
          :coverPath="item.pic"
          :view="item.play"
          :danmaku="item.video_review"
          :allParams="item"
        />
      </div>
    </van-list>
  </div>
</template>

<script>
import {
  Swipe as VanSwipe,
  SwipeItem as VanSwipeItem,
  List as VanList,
  Loading as VanLoading
} from "vant";
/* import { apiGetSlider, apiGetRecommend } from "@/api/index.js"; */
import { formatImage } from "@/filters/filters.js";
import VideoItem from "@/components/video-item/VideoItem.vue";
import listLoadingMixin from "@/mixins/listLoading.js";
export default {
  name: "Index",
  inject: ["rootThemeColor", "rootTitle", "rootKeyword", "rootDescription"],
  mixins: [listLoadingMixin],
  metaInfo() {
    return {
      title: this.rootTitle,
      meta: [
        { name: "keywords", content: this.rootKeyword },
        { name: "description", content: this.rootDescription }
      ]
    };
  },
  components: {
    VanSwipe,
    VanSwipeItem,
    VanList,
    VanLoading,
    VideoItem
  },
  data() {
    return {
      /*    swipes: [], //轮播数据
      list: [], //列表数据 */
      dataIndex: 0,
      totalPage: 0,
      currentPage: 1,
      pageSize: 10,
      videoList: [],
      videoSource: []
    };
  },
  filters: {
    formatImage
  },
  created() {
    // 数据变动
    console.log(this.$route);
    const query = this.$route.query;
    const dataArr = ["a", "b", "c", "d"];
    const dataNum = [1, 2, 3, 4];
    let index = 0;
    if (query.id && dataArr.includes(query.id)) {
      index = dataArr.indexOf(query.id);
    }
    this.dataIndex = index;
    console.log("index==>", index);

    sessionStorage.dataType = dataArr[index].toUpperCase();
    console.log(dataArr[index]);
    sessionStorage.dataNum = dataNum[index];
    console.log(dataNum[index]);
    
    this.getRecommend();
    /*
    console.log(index);
    console.log(this.$mockData);
    this.swipes = this.$mockData[index].banner;
    this.list = this.$mockData[index].list;
    console.log(this.list); */
  },
  watch: {
    $route(newV) {
      console.log(newV);
      if (newV.path === "/" && newV.query.id) {
        history.go(0);
      }
    }
  },
  methods: {
    getRecommend() {
      const list = this.$mockData[this.dataIndex].list;
      console.log("dataIndex==>", this.dataIndex);
      this.totalPage = Math.ceil(list.length / 10);
      this.videoSource = list;
      this.videoList.push(...this.videoSource.slice(0, 10));
      this.listLoading = false;
    },
    onListLoad() {
      clearTimeout(this.listTimeout);
      this.listTimeout = setTimeout(() => {
        if (this.currentPage < this.totalPage) {
          this.videoList.push(
            ...this.videoSource.slice(
              this.currentPage * this.pageSize,
              (this.currentPage + 1) * this.pageSize
            )
          );
          this.currentPage++;
          if (this.currentPage === this.totalPage) {
            this.listFinished = true;
          }
        }
        this.listLoading = false;
      }, 1000);
    }
  }
};
</script>
<style lang="scss" scoped>
.my-swipe {
  height: rem(144px);
  margin: 0 rem(10px) 0;
  border-radius: rem(3px);
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #fff;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    p {
      width: 80%;
      height: rem(20px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: absolute;
      left: rem(8px);
      bottom: rem(6px);
      font-size: 14px;
      line-height: rem(20px);
      margin: 0;
    }
  }
  ::v-deep .van-swipe__indicators {
    left: 90%;
    bottom: rem(6px);
  }
  .banner-gg {
    position: relative;
    &::before {
      position: absolute;
      right: rem(6px);
      top: rem(6px);
      content: "广告";
      font-size: rem(12px);
      background: #f1f1f1;
      width: rem(30px);
      line-height: rem(16px);
      border: 1px solid #aaa9a9;
      opacity: 0.6;
      color: #ada3a3;
      border-radius: 3px;
    }
  }
}
.list {
  padding: {
    left: rem(5px);
    right: rem(5px);
  }
  display: flex;
  flex-wrap: wrap;
  .vi {
    width: 48%;
    box-sizing: border-box;
    background: #fff;
    margin: rem(3px) 1%;
    border-radius: 3px;
  }
}
</style>
